<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatSubjectLinkComponent/>
    </div>
    <!-- 页面主体 -->
    <div class="main-container">
      <div class="main-wrap">
        <div class="nav-breadcrumb">
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><span v-text="articleDetails.categoryName">Xxx</span></el-breadcrumb-item>
            <el-breadcrumb-item><span v-text="articleDetails.title">Xxx</span></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 右侧的列表 -->
        <div class="right-aside-container">
          <div class="right-aside-wrap">
            <!-- 搜索区域 -->
            <SearchComponent :defaultSearchKeywords="defaultSearchKeywords"/>
            <!-- 推荐列表 -->
            <RecommendListComponent :recommendList="recommendList"/>
          </div>
        </div>
        <!-- 左侧主体 -->
        <div class="left-aside-container">
          <div class="left-aside-wrap">
            <!-- 左侧的文章详情 -->
            <div class="article-details">
              <h1 class="title" v-text="articleDetails.title"></h1>
              <div class="publish-info">
                <span>作者：</span>
                <span class="author" v-text="articleDetails.authorName"></span>
                <span>发布时间：</span>
                <span class="publish-time" v-text="articleDetails.gmtCreate"></span>
              </div>
              <div class="content" v-html="articleDetails.detail"></div>
            </div>
            <!-- 左侧的友情链接 -->
            <div class="friend-links">
              <h1 class="title">学茶商城合作伙伴</h1>
              <div class="content">
                <img src="/images/ncw-pc-join.jpg"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatSubjectLinkComponent from '@/components/FloatSubjectLinkComponentView.vue';
import SearchComponent from '@/components/SearchComponentView.vue';
import RecommendListComponent from '@/components/RecommendListComponentView.vue';

export default {
  components: {
    FloatSubjectLinkComponent,
    SearchComponent,
    RecommendListComponent
  },
  data() {
    return {
      pageTitle: '',
      defaultSearchKeywords: '',
      categoryList: [],
      recommendList: [],
      articleDetails: {},
    }
  },
  methods: {
    loadCategoryList() {
      let categoryList = [
        {id: 1, name: '推荐', url: '/tuijian'},
        {id: 2, name: '经验', url: '/jingyan'},
        {id: 3, name: '功效', url: '/gongxiao'},
        {id: 4, name: '冲泡', url: '/chongpao'},
        {id: 5, name: '存放', url: '/cunfang'},
        {id: 6, name: '禁忌', url: '/jinji'},
        {id: 7, name: '茶器', url: '/chaqi'},
        {id: 8, name: '文化', url: '/wenhua'},
        {id: 9, name: '花茶', url: '/huacha'}
      ];
      this.categoryList = categoryList;
    },
    loadPageTitle() {
      this.pageTitle = this.articleDetails.title + ' - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '黄金芽茶的口感特点';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadArticleDetails() {
      let articleId = this.$router.currentRoute.query.id;
      let url = 'http://localhost:9180/content/articles/' + articleId;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          console.log('获取文章详情，成功！');
          console.log(jsonResult.data);
          this.articleDetails = jsonResult.data;
          this.loadPageTitle();
          this.$store.state.articleCategoryLink = '/jinji'
        } else {
          console.log('获取文章详情，失败！');
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },
    loadRecommendList() {
      let recommendList = [
        {
          id: 1,
          title: '茶友必读：如何正确使用盖碗！',
          image: '/images/20191108_9F9DCE3C8DBC0D51FDF120BD805CF32F.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 2,
          title: '穆教授讲银壶',
          image: '/images/20191108_22ED0D61E361D1053F4AB0B1E8E4D466.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 3,
          title: '中国古风茶壶，风情万种！',
          image: '/images/20191108_093E9EE6B8D528433CA408A466FE774B.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 4,
          title: '你用的铜壶安全吗',
          image: '/images/20191108_2CF5E8662046796E734D12E5E670A5F7.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 5,
          title: '多图｜史上最全品茗杯图鉴',
          image: '/images/20191108_A4A3F2FD5494D0A89B61124ED08C1747.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 6,
          title: '金壶、银壶、铁壶、老铁壶、陶壶、玻璃壶烧水泡茶有啥区别？',
          image: '/images/20191108_6F93D75423CC801189148B8A14325D53.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 7,
          title: '茶具，你真的洗对了吗？',
          image: '/images/20191108_B61EF435EAFB02A1844DEE283151B6CE.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 8,
          title: '紫砂壶知识︱小壶钮，大作用',
          image: '/images/20191108_497DD45319B417A246DA8BC85E7B6512.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 9,
          title: '如何选一把好的银壶',
          image: '/images/20191108_00BC8EDB8235F99DAA25440D56E05C8F.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 10,
          title: '茶具怎么挑？挑选茶具要注意哪些细节？',
          image: '/images/20191108_347209F09DC22BCB1C9E92AC14FEC182.jpg',
          link: '/article/details?id=9527'
        }
      ];
      this.recommendList = recommendList;
    }
  },
  mounted() {
    this.loadDefaultSearchKeywords();
    this.loadCategoryList();
    this.loadRecommendList();
    this.loadArticleDetails();
  }
}
</script>

<style>
.article-details {
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.article-details .title {
  margin: 0px auto 20px auto;
}

.article-details .publish-info {
  color: #999;
  font-size: 14px;
  margin: 0px auto 20px auto;
}

.article-details .publish-info .author {
  margin-right: 30px;
}

.article-details .publish-info .publish-time {
}

.article-details .content {
  margin: 10px auto;
  border-top: 1px solid #ddd;
  padding: 20px 20px 0px 20px;
  text-align: left;
  font-size: 18px;
  color: #333;
}

.article-details .content p {
  margin: 24px auto;
}

.friend-links {
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.friend-links .title {
  margin: 0px auto 20px auto;
}

.friend-links .content img {
  width: 810px;
}
</style>